<template>
    <div>
        <div class="main-content-title" v-if="isShowContentTitle">
            <i class="el-icon-s-grid"></i>
            {{navTitle}}
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            navTitle: '',
            isShowContentTitle: false
        }
    },
    watch: {
        $route(to, from) {
            this.navTitle = to.meta.navTitle || '';
            let bottomPage = ['login'];
            // let bottomPage = ['login', 'home'];
            let toPageName = to.name;
            let isNeedShowContentTitle = true;
            for (let i=0; i<bottomPage.length; i++) {
                if (toPageName === bottomPage[i]) {
                    isNeedShowContentTitle = false;
                    break;
                }
            }
            this.isShowContentTitle = isNeedShowContentTitle;
        }
    },
}
</script>

<style lang="scss" scoped>
    .main-content-title {
        padding: 12px;
        box-sizing: border-box;
        font-size: 16px;
        font-weight: 500;
        background-color: #fff;
        border-bottom: 1px solid #f2f2f2;
    }
</style>